<e></e>
<template>
  <el-dialog
    :visible.sync="visible"
    :lock-scroll="false"
    custom-class="loginLayer"
    @close="clearRegister(step)">
    <template v-if="~[0, 1, 3, 4].indexOf(step)">
      <div class="login-box login-box1">
        <h2 class="login-header">{{step > 1 ? '找回密码' : '注册'}}</h2>
        <div class="login-from">
          <template v-if="~[0, 3].indexOf(step)">
            <div class="login-group login-phone"
                 :class="classObject('register_phone')">
              <i></i>
              <input v-validate="'required|mobile'" v-model="register.phone" name="register_phone" type="text"
                     data-vv-as="手机号码" placeholder="请输入手机号">
              <span v-show="errors.has('register_phone')">{{ errors.first('register_phone') }}</span>
            </div>
            <button class="login-btn" @click="nextStep" :disabled="register.loading"
                    :class="{loading: register.loading}">
              下一步 <i></i></button>
            <p class="login-tip" v-if="step === 0">已有账号，去<span @click="step = 2">登录</span></p>
            <p class="login-tip" v-else>没有账号?<span @click="step = 0">免费注册</span></p>
          </template>
          <template v-else>
            <div class="login-group login-phone" style="border-bottom: none">
              <i></i>
              <p style="padding-left: 42px;">{{register.phone}}</p>
            </div>
            <div class="login-group login-pwd" :class="classObject('register_pwd')">
              <i></i>
              <input v-validate="'required|min:6'" data-vv-as="密码" name="register_pwd" type="password"
                     v-show="!register.showPwd"
                     placeholder="请输入密码" v-model.trim="register.pwd">
              <input type="text" placeholder="请输入密码" v-show="register.showPwd" v-model="register.pwd">
              <span v-show="errors.has('register_pwd')">{{ errors.first('register_pwd') }}</span>
              <div class="pwd-eyes" :class="{on: register.showPwd}" @click="register.showPwd = !register.showPwd"></div>
            </div>
            <div class="login-code">
              <div class="login-group" :class="classObject('register_code')">
                <i></i>
                <input v-validate="'required'" data-vv-as="验证码" type="text" name="register_code" placeholder="请输入验证码"
                       v-model="register.code">
                <span v-show="errors.has('register_code')">{{ errors.first('register_code') }}</span>
              </div>
              <button :disabled="time > 0" @click="getCode" class="code-btn">{{text}}</button>
            </div>
            <div class="login-tool" v-if="step === 1">
              <p class="login-pact" @click="register.pact = !register.pact" :class="{on: register.pact}">
                已阅读并同意
              </p>
              <a href="http://www.xilongfx.com/about/57" target="_blank">《熙隆领航客户协议》</a>
            </div>
            <button class="login-btn" @click="registered" :disabled="register.loading"
                    :class="{loading: register.loading}">
              {{step > 1 ? '确认修改密码' : '注册并登录'}} <i></i></button>
            <p class="login-tip" v-if="step === 1">已有账号，去<span @click="step = 2">登录</span></p>
          </template>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="login-box login-box2">
        <h2 class="login-header">登录</h2>
        <div class="login-group login-phone" :class="classObject('login_phone')">
          <i></i>
          <input v-validate="'required|numeric'" name="login_phone" type="text"
                 data-vv-as="手机号码" placeholder="请输入账号" v-model.trim="login.phone" autocomplete="off">
          <span v-show="errors.has('login_phone')">请输入账号</span>
        </div>
        <div class="login-group login-pwd" :class="classObject('login_pwd')">
          <i></i>
          <input v-validate="'required|min:6'" data-vv-as="密码" name="login_pwd" type="password"
                 v-show="!login.showPwd"
                 placeholder="请输入密码" v-model.trim="login.pwd" autocomplete="off">
          <input type="text" placeholder="请输入密码" v-show="login.showPwd" v-model="login.pwd" autocomplete="off">
          <span v-show="errors.has('login_pwd')">{{ errors.first('login_pwd') }}</span>
          <div class="pwd-eyes" :class="{on: login.showPwd}" @click="login.showPwd = !login.showPwd"></div>
        </div>
        <button class="login-btn" @click="logined" :disabled="login.loading" :class="{loading: login.loading}">
          登录 <i></i></button>
        <div class="login-tool">
          <p class="login-pact" @click="savePhone = !savePhone" :class="{on: savePhone}">记住用户名</p>
          <span @click="step = 3">忘记密码？</span>
          <span @click="step = 0">注册</span>
        </div>
        <p class="login-tip" @click="gotoWx"><span class="wxInco">微信登录</span></p>
      </div>
    </template>
  </el-dialog>
</template>
<script>
  import { Validator } from 'vee-validate'

  export default {
    data () {
      return {
        visible: false,
        step: 0,
        register: {
          phone: '',
          code: '',
          pwd: '',
          loading: false,
          showPwd: false,
          pact: true,
        },
        login: {
          phone: '',
          pwd: '',
          showPwd: false,
          loading: false,
        },
        time: 0,
        disabled: false,
        savePhone: false,
      }
    },
    created () {
      let phone = localStorage.getItem('phone')
      if (phone) {
        this.savePhone = true
        this.login.phone = phone
      }
      window.addEventListener('keydown', event => {
        if (event.keyCode === 13 && this.visible) {
          let step = this.step
          switch (step) {
            case 0:
            case 3:
              this.nextStep()
              break
            case 1:
            case 4:
              this.registered()
              break
            case 2:
              this.logined()
              break
          }
        }
      })
    },
    methods: {
      gotoWx() {
        window.location.href='http://www.xilongfx.com/index/wechat/login?return_url='+window.location.href
      },
      classObject (name) {
        return {
          'is-success': this.fields[name] ? this.fields[name].valid : false,
          'is-danger': this.errors.has(name),
        }
      },
      show (step = 2) {
        this.step = step
        this.$nextTick(() => {
          this.visible = true
        })
      },
      logined () {
        let login = this.login
        let {phone, pwd} = login
        this.$validator.validateAll().then(flag => {
          if (!flag) return
          login.loading = true
          this.$http.post('/index/beta_api/login', {
            username: phone,
            password: pwd,
          }).then(data => {
            if (data.code === 1) {
              localStorage.setItem('phone', this.savePhone ? phone : '')
              window.location.reload()
            } else {
              login.loading = false
              this.$message.error(data.msg)
            }
          }).catch(err => {
            // this.$message.error(err)
            login.loading = false
          })
        })
      },
      registered () {
        let register = this.register
        let {phone, pwd, code, pact} = register
        if (!pact && this.step === 1) {
          this.$message.error('请同意用户协议后注册!')
          return
        }
        this.$validator.validateAll().then(flag => {
          if (!flag) return
          register.loading = true
          this.$http.post(this.step === 1 ? '/index/beta_api/register' : '/index/beta_api/getNewPassword', {
            username: phone,
            password: pwd,
            token: code,
          }).then(data => {
            localStorage.setItem('phone', phone)
            window.location.reload()
          }).catch(err => {
            // this.$message.error(err)
            register.loading = false
          })
        })
      },
      nextStep () {
        let register = this.register
        this.$validator.validateAll().then(flag => {
          if (!flag) return
          register.loading = true
          this.getCode(true).catch(err => {
            this.asyncError('register_phone', err)
            register.loading = false
          })
        })
      },
      asyncError (key, msg) {
        this.errors.errors.unshift({field: key, msg: msg, scope: '__global__'})
        this.fields[key].valid = false
      },
      getCode (isNextStep) {
        return this.$http.post('/index/beta_api/getsms', {
          username: this.register.phone,
          type: this.step > 1 ? 'repeat' : '',
        }, {notMsg: true}).then(data => {
          if (isNextStep) {
            this.register.loading = false
            this.step = this.step === 0 ? 1 : 4
          }
          this.time = 120
          this.$nextTick(() => {
            this.timer()
          })
        })
      },
      timer () {
        if (this.time > 0) {
          this.time--
          setTimeout(this.timer, 1000)
        }
      },
      clearRegister (val) {
        if (val === 1 || val === 4) {
          this.register = {
            phone: '',
            code: '',
            pwd: '',
            loading: false,
            showPwd: false,
            pact: true,
          }
          this.time = 0
        }
      },
    },
    computed: {
      text: function () {
        return this.time > 0 ? this.time + 's 后重新获取' : '获取验证码'
      },
    },
    watch: {
      step (val, oldVal) {
        console.log(arguments)
        this.clearRegister(oldVal)
      },
    },
  }
</script>
<style lang="scss">
  $login-color: #1f2531;
  $login-danger-color: #ec0808;
  .loginLayer {
    width: 500px;
    border-radius: 16px;
    background: #fff;
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__headerbtn {
      top: 10px;
      right: 15px;
      position: absolute;
      z-index: 2;
    }
    .el-dialog__body {
      padding: 0;
    }
  }

  .login-box {
    position: relative;
    padding: 30px 80px 38px;
    &:after {
      content: '';
      position: absolute;
      background: url("top1.png") center no-repeat;
      width: 160px;
      height: 176px;
      top: -66px;
      left: 250px - 161 / 2;
    }
  }

  .login-box2 {
    &:after {
      background-image: url("./top2.png");
    }
  }

  .login-header {
    font-size: 26px;
    text-align: center;
    color: $login-color;
    line-height: 1;
    padding: 80px 0 10px;
    font-weight: bold;
  }

  .login-from {
  }

  .login-group {
    background: 12px center no-repeat;
    line-height: 38px;
    height: 39px;
    border-bottom: 1px solid #ddd;
    margin-top: 16px;
    position: relative;
    input {
      width: 100%;
      // padding: 0 100px 0 42px;
      padding-left: 42px;
      border: none;
      height: 38px;
      background: transparent;
      display: block;
    }
    i {
      position: absolute;
      left: 0;
      top: 0;
      width: 25px;
      height: 38px;
      background-repeat: no-repeat;
      background-position: center;
    }
    span {
      position: absolute;
      height: 38px;
      right: 0;
      top: 0;
      font-size: 12px;
      color: $login-danger-color;
    }
  }

  .is-danger {
    border-color: $login-danger-color;
  }

  .is-success {
    border-color: #06af0a;
    background: url("./success.png") right 10px center no-repeat;
  }

  .login-btn {
    height: 45px;
    margin-top: 32px;
    width: 100%;
    display: block;
    border: none;
    font-size: 16px;
    color: #d0b88a;
    background-color: #1f2531;
    border-radius: 9px;
    box-shadow: 0 4px 14px rgba(#6f82a8, .56);
    position: relative;
    &[disabled] {

    }
    &.loading {
      font-size: 0;
      cursor: wait;
      i {
        background: url("./loading.png") center no-repeat;
        width: 34px;
        height: 34px;
        display: block;
        animation: rotating 1.5s linear infinite;
        position: absolute;
        left: 50%;
        top: 10px;
        margin-left: -17px;
      }
    }
  }

  .login-phone i {
    background-image: url("./phone.png");
  }

  .login-name i {
    background-image: url("./name.png");
  }

  .login-pwd {
    background-position: right 36px center;
    i {
      background-image: url("./pwd.png");
    }
    span {
      right: 36px;
    }
  }

  .login-code {
    height: 55px;
    .login-group {
      float: left;
      width: 220px;
    }
    i {
      background-image: url("./code.png");
    }
    button {
      float: right;
      width: 108px;
      height: 35px;
      background: transparent;
      color: #1f2531;
      border: 1px solid;
      border-radius: 5px;
      margin-top: 16px;
      &[disabled] {
        background-color: #c7c7c7;
        color: #ffffff;
        border-color: #c7c7c7;
        cursor: no-drop;
      }
    }
  }

  .login-tip {
    font-size: 12px;
    text-align: center;
    color: #c8c8c8;
    line-height: 1;
    margin-top: 20px;
    position: relative;
    span {
      cursor: pointer;
      &.wxInco:before {
        display: inline-block;
        width: 17px;
        height: 14px;
        background: url("./wechat_icon0.png");
        content: '';
        margin-right: 6px;
        position: relative;
        top: 2px;
      }
    }
    &:after,&:before {
      content: '';
      width: 101px;
      height: 1px;
      background-color: #e5e5e5;
      position: absolute;
      top: 9px;
    }
    &:after {
      right: 0;
    }
    &:before {
      left: 0;
    }
    &:hover {
      color: #059f10;
    }
    &:hover .wxInco:before {
      background: url("./wechat_icon.png");
    }
  }


  .pwd-eyes {
    width: 32px;
    height: 38px;
    position: absolute;
    top: 0;
    right: 0;
    background: url("./_eyes-open_icon.png") center no-repeat;
    cursor: pointer;
    &.on {
      background-image: url("./_eyes-closed_icon.png");
    }
  }

  .login-tool {
    margin-top: 16px;
    font-size: 12px;
    color: #999999;
    line-height: 1;
    height: 12px;
    p {
      float: left;
    }
    span {
      cursor: pointer;
      color: #d0b88a;
      float: right;
      &:last-child {
        margin-right: 10px;
      }
    }
    a {
      color: #d0b88a;
    }
  }

  .login-pact {
    background: url("select.png") left center no-repeat;
    padding-left: 16px;
    cursor: pointer;
    &.on {
      background-image: url("./selected.png");
    }
  }
</style>
